<template>
  <div class="stockAOrderDia">
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="盘点详情"
      :visible.sync="inComData.stockAOrderDiaStatus"
      :fullscreen="true"
      :modal="false"
      @closed="closededitDialogStatus"
      @open="openeditDialogStatus"
    >
      <div
        style="width: 70%"
        class="dialogItem"
      >
        <el-form
          :model="editForm"
          :rules="rules"
          ref="editForm"
          label-width="100px"
          style="width: 100%; margin: 0 auto"
        >
          <el-row class="mb-10 text-primary">基础信息</el-row>
          <el-row class="mb-10">
            <el-col :span="8">
              <el-form-item
                label="盘点名称："
                prop="stockName"
              >
                <el-input
                  disabled
                  v-model="editForm.stockName"
                  placeholder="请输入盘点名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="领用人："
                prop="recipient"
              >
                <el-select
                  disabled
                  v-model="editForm.recipientName"
                  placeholder="请选择"
                  style="width: 100%"
                  @focus="getEnableUserListApi"
                >
                  <el-option
                    v-for="item in manOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="盘点日期："
                prop="stockDate"
              >
                <el-date-picker
                  disabled
                  style="width: 100%"
                  v-model="editForm.stockDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="mb-10">
            <el-col :span="8">
              <el-form-item
                label="仓库名称："
                prop="storeId"
              >
                <el-select
                  disabled
                  v-model="editForm.storeName"
                  placeholder="请选择"
                  style="width: 100%"
                  @focus="getStoreMgListApi"
                >
                  <el-option
                    v-for="item in storeOptions"
                    :key="item.id"
                    :label="item.storeName"
                    :value="item.id"
                  >
                  </el-option> </el-select
              ></el-form-item> </el-col
            ><el-col :span="8">
              <el-form-item label="备注：">
                <el-input
                  disabled
                  type="textarea"
                  placeholder="请输入备注"
                ></el-input>
              </el-form-item> </el-col
          ></el-row>
          <el-row class="mb-10">
            <el-col :span="16"> </el-col>
          </el-row>
          <el-row class="mb-10 text-primary">盘点信息</el-row>
          <el-row>
            <el-form-item
              label-width="0"
              prop="teamTakeStockItems"
              ><el-table
                :data="editForm.teamTakeStockItems"
                style="width: 100%; min-height: 600px"
                element-loading-text="Loading"
                element-loading-spinner="el-icon-loading"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="55"
                />

                <el-table-column
                  prop="supplierName"
                  label="供应商"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="batchNum"
                  label="批号"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="materialName"
                  label="物料名称"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="modelName"
                  label="规格型号"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  label="计量单位"
                  prop="unit"
                >
                </el-table-column>
                <el-table-column
                  label="库存合计"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.totalInventory }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="本月原材料库存"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.materialInventory }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="本月成品及半成品库存"
                  min-width="170"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.manufacturedInventory }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="累计领用量"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.totalVolume }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  min-width="120"
                  prop="remark"
                >
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.remark === '' ? '/' : scope.row.remark
                    }}</span>
                  </template>
                </el-table-column>
              </el-table></el-form-item
            >
          </el-row>
        </el-form>
        <el-row
          type="flex"
          justify="center"
          slot="footer"
        >
          <div>
            <el-button
              v-if="editForm.permission"
              type="warning"
              @click="auditHandler('detail', editForm)"
              >审核</el-button
            >
            <el-button @click="inComData.stockAOrderDiaStatus = false"
              >返回</el-button
            >
          </div>
        </el-row>
      </div>

      <div
        style="width: calc(30% - 20px); height: 100%; margin-left: 20px"
        class="dialogItem"
      >
        <approxFlow
          ref="approxFlow"
          :steps="steps"
        ></approxFlow>
      </div>
    </el-dialog>
    <toExamine
      ref="toExamine"
      :steps="steps"
      :approxForm="approxForm"
      :toExamineData="toExamineData"
    ></toExamine>
  </div>
</template>

<script>
import {
  getTeamTakeStockPage,
  addTeamTakeStock,
  addTeamTakeStockDraft,
  updateTeamTakeStockDraft,
  deleteTeamTakeStock,
  getTeamTakeStockDetail,
  getTeamTakeStockGetItem,
  getTeamTakeStockExport,
  terminatePlan,
  executeTaskPlan,
} from '/src/http/materialDispatch/stockAOrder.js'
import approxFlow from '/src/component/assembly/approxFlow.vue'
import toExamine from '/src/component/assembly/toExamine.vue'
import download from '/src/utils/downLoad.js'
import {
  getProcessLog,
  getEnableUserList,
  getStoreMgList,
  getSupplierInfoList,
  getMaterialTypeDetail,
  getMaterialDetail,
  getMaterialTree,
  getNextNodeAssignWay,
} from '/src/http/commonApi.js'

export default {
  components: {
    approxFlow,
    toExamine,
  },
  data() {
    return {
      ccListStatus: false,
      manOptions: [],
      ccList: [],
      toExamineData: {
        toExamineDataStatus: false,
        isSearch: false,
      },
      approxForm: {
        approveOperation: '1',

        opinion: '发起了审批',
      },
      steps: {},

      stockName: '',
      orderNum: '',
      recipient: null,
      stockDate: [],

      multipleSelection: [],

      editTitle: '新增',
      innerVisible: false,
      teamTakeStockItems: [],
      innerSelect: [],
      innerAllSelect: [],
      editDialogStatus: false,
      storeOptions: [],
      editForm: {
        stockName: '',
        recipient: null,
        stockDate: '',
        storeId: null,
        remark: '',
        teamTakeStockItems: [],
      },
      rules: {
        stockName: [
          {
            required: true,
            message: '请输入盘点名称',
            trigger: 'change',
          },
        ],
        stockDate: [
          {
            required: true,
            message: '请选择盘点时间',
            trigger: 'change',
          },
        ],
        recipient: [
          {
            required: true,
            message: '请选择领用人',
            trigger: 'change',
          },
        ],
        storeId: [
          {
            required: true,
            message: '请选择仓库名称',
            trigger: 'change',
          },
        ],
      },
      supplierIdRules: [
        {
          required: true,
          message: '请选择供应商',
          trigger: 'change',
        },
      ],
      batchNumRules: [
        {
          required: true,
          message: '请选择批号',
          trigger: 'change',
        },
      ],
      materialIdRules: [
        {
          required: true,
          message: '请选择物料名称',
          trigger: 'change',
        },
      ],
      modelIdRules: [
        {
          required: true,
          message: '请选择规格型号',
          trigger: 'change',
        },
      ],

      stotalInventoryRules: [
        {
          required: true,
          message: '请输入库存合计',
          trigger: 'change',
        },
      ],
      materialInventoryRules: [
        {
          required: true,
          message: '请输入本月原材料库存',
          trigger: 'change',
        },
      ],
      manufacturedInventoryRules: [
        {
          required: true,
          message: '请输入本月成品及半成品库存',
          trigger: 'change',
        },
      ],
      totalVolumeRules: [
        {
          required: true,
          message: '请输入累计领用量',
          trigger: 'change',
        },
      ],

      selectRowArr: [],
      materialArrOptions: [],

      dialogVisible: false,
      projectInput: '',
      renderData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      isSearch: false,

      editTitle: '',
      editDialogStatus: false,
      editProjectIdentifyInput: '',
      editProjectInput: '',
      from: {},

      detailData: {},
    }
  },
  props: {
    inComData: Object,
  },
  mounted() {
    this.getTeamTakeStockPageApi()
  },
  methods: {
    closededitDialogStatus() {
      this.inComData.materSectionSuperAnalysisDiaStatus = false
    },
    openeditDialogStatus() {
      console.log('::this.inComData.data: ', this.inComData.data)
      this.seeDetail(this.inComData.data)
    },

    seeDetail(data) {
      getTeamTakeStockDetail(data.id).then((res) => {
        if (res.code == 200) {
          console.log('物资核销-单条详情::: ', res.data)
          if (this.editTitle === '新增') {
            this.getTeamTakeStockGetItemApi()
          } else {
            this.editForm = res.data
            console.log('this.editForm::: ', this.editForm)
          }
          if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields()
          }

          this.editDialogStatus = true
        } else {
          this.$message.error(res.message)
        }
      })
      if (data.state !== 'draft') {
        getProcessLog({ id: data.orderId }).then((res) => {
          if (res.code == 200) {
            this.steps = res.data
            this.steps.state = this.editForm.state
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },

    toExamineFun() {
      console.log(':this.detailData:: ', this.detailData)
      if (Object.keys(this.detailData).length > 0) {
        console.log('1::: ', 1)
        this.startProcess(this.detailData)
      } else {
        console.log('2::: ', 2)
        this.startProcess(this.editForm)
      }
    },

    exportHandler() {
      if (this.multipleSelection.length == 0) {
        if (this.isSearch) {
          let params = {
            ids: '',
            stockName: this.stockName,
            orderNum: this.orderNum,
            recipient: this.recipient,
            stockDate: this.stockDate,
          }
          this.getTeamTakeStockExportApi(params)
        } else {
          this.getTeamTakeStockExportApi()
        }
      } else {
        let ids = this.multipleSelection.map((el) => {
          return el.id
        })
        let params = { ids: ids.join(',') }
        this.getTeamTakeStockExportApi(params)
      }
    },

    auditHandler(name = '', data) {
      if (name === 'detail') {
        this.detailName = 'detail'
        this.$confirm(`确认要审核【${data.stockName}】？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.approxForm.opinion = ''

            getProcessLog({ id: data.orderId }).then((res) => {
              if (res.code == 200) {
                this.toExamineData.toExamineDataStatus = true
                this.steps = res.data
              } else {
                this.$message.error(res.message)
              }
            })
          })
          .catch(() => {
            this.$message.info('已取消审批')
          })
      } else {
        if (this.multipleSelection.length > 1) {
          this.$message.warning('审批不能选择多条')
          this.multipleSelection = []
        } else if (this.multipleSelection.length == 0) {
          this.$message.warning('未选择物资盘点')
        } else if (this.multipleSelection[0].state === 'draft') {
          this.$message.warning('该物资盘点为草稿，不能进行审批')
        } else if (!this.multipleSelection[0].permission) {
          if (this.multipleSelection[0].state === 'completed') {
            this.$message.warning('该物资盘点已完成审批')
          } else if (this.multipleSelection[0].state === 'terminated') {
            this.$message.warning('该物资盘点已结束审批')
          } else {
            this.$message.warning('无审批权限')
          }
        } else {
          this.$confirm(
            `确认要审核选中的【${this.multipleSelection[0].stockName}】？`,
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
              this.approxForm.opinion = ''

              getProcessLog({ id: this.multipleSelection[0].orderId }).then(
                (res) => {
                  if (res.code == 200) {
                    this.toExamineData.toExamineDataStatus = true
                    this.steps = res.data
                  } else {
                    this.$message.error(res.message)
                  }
                }
              )
            })
            .catch(() => {
              this.$message.info('已取消审批')
            })
        }
      }
    },

    changeMaterial(v, row) {
      if (!row.model) {
        row.modelId = null
      }
      this.getMaterialDetailApi(v[v.length - 1], row)
      this.getMaterialTypeDetailApi(v[v.length - 1], row)
    },
    changeModel(v, row) {
      row.typeOptions.forEach((item) => {
        if (item.id == v) {
          row.unit = item.unit
          row.modelName = item.model
        }
      })
      this.getVerificationSheetApi(
        row.materialId[row.materialId.length - 1],
        v,
        this.editForm.stockDate,
        row
      )
    },
    getModelHandler(e, row) {
      this.getMaterialDetailApi(
        row.materialId[(row.materialId, length - 1)],
        row
      )
    },

    submitRowHandler(row) {
      if (row.materialId == null) {
        this.$message.error('请选择物料')
        return
      }
      if (row.modelId == null) {
        this.$message.error('请选择规格型号')
        return
      }
      if (
        !row.aggregateCompleted ||
        !row.constructionCompleted ||
        !row.constructionCompletedCount ||
        !row.wastageAttritionCoefficient
      ) {
        this.$message.error('请选检查表单是否填写完完整')
        return
      }
      row.rowStatus = true
      this.getVerificationSheetApi(
        row.materialId[row.materialId.length - 1],
        row.modelId,
        this.editForm.stockDate
      )
    },

    saveDraftHandler(formName) {
      if (this.editTitle === '新增') {
        this.addTeamTakeStockDraftApi(this.editForm)
      } else {
        this.updateTeamTakeStockDraftApi(this.editForm)
      }
    },

    submitHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ccList = []
          this.getEnableUserListApi()
          this.ccListStatus = true
        } else {
          this.$message.warning('请检查输入项是否填写完整')
          return false
        }
      })
    },

    ccListSumbit() {
      let params = this.editForm
      this.startProcess(params)
    },

    /**
     * 接口
     *
     */

    getEnableUserListApi() {
      getEnableUserList().then((res) => {
        if (res.code == 200) {
          this.manOptions = res.data
        }
      })
    },

    getTeamTakeStockGetItemApi() {
      console.log('::: ', this.editForm.recipient, this.editForm.storeId)
      if (this.editForm.recipient === null) {
        this.$message.error('请先选择领用人')
        return
      }
      if (this.editForm.storeId === null) {
        this.$message.error('请先选择仓库名称')
        return
      }
      if (this.editForm.recipient && this.editForm.storeId) {
        getTeamTakeStockGetItem(
          this.editForm.recipient,
          this.editForm.storeId
        ).then((res) => {
          console.log('res::: ', res)
          if (res.code == 200) {
            if (res.data.length == 0) {
              this.$message.error('暂未查询到出库数据')
              return
            } else {
              this.innerVisible = true
              this.teamTakeStockItems = res.data
            }
          } else {
            this.$message.error(res.message)
            return
          }
        })
      }
    },

    getStoreMgListApi() {
      getStoreMgList().then((res) => {
        if (res.code == 200) {
          this.storeOptions = res.data
        }
      })
    },

    getSupplierInfoListApi(item) {
      getSupplierInfoList().then((res) => {
        if (res.code == 200) {
          item.supplierOptions = res.data
        }
      })
    },

    getMaterialTreeApi(item) {
      getMaterialTree().then((res) => {
        if (res.code == 200) {
          if (item) {
            this.$set(item, 'materialArrOptions', res.data)
          } else {
            this.materialArrOptions = res.data
          }
        }
      })
    },

    async getMaterialTypeDetailApi(id, row) {
      getMaterialTypeDetail(id).then((res) => {
        if (res.code === 200) {
          if (res.data.parentIds == null) {
            row.materialId = [res.data.pid, res.data.id]
          } else {
            row.materialId = res.data.parentIds.split(',').map(Number)
            row.materialId.shift()
            row.materialId.push(res.data.id)
          }
        }
      })

      console.log('row::: ', row)
    },
    async a(str, id, item) {
      await this.getMaterialTreeApi()

      if (str instanceof Array) {
        item.materialId = str
      } else {
        item.materialId = str.split(',').map(Number)
        item.materialId.shift()
        item.materialId.push(id)
      }
    },

    getMaterialDetailApi(id, item) {
      getMaterialDetail(id).then((res) => {
        if (res.code == 200) {
          item.typeOptions = res.data
        }
      })
    },

    getTeamTakeStockPageApi(
      pageNum = 1,
      pageSize = 10,
      stockName = '',
      orderNum = '',
      recipient = null,
      date = []
    ) {
      let params = {}
      if (date.length == 0) {
        params = {
          pageNum,
          pageSize,
          stockName,
          orderNum,
          recipient,
        }
      } else {
        if (date[0] === date[1]) {
          params = {
            pageNum,
            pageSize,
            stockName,
            orderNum,
            recipient,
            stockDate: date[0],
          }
        } else {
          params = {
            pageNum,
            pageSize,
            stockName,
            orderNum,
            recipient,
            stockStartDate: date[0],
            stockEndDate: date[1],
          }
        }
      }
      console.log('params::: ', params)
      getTeamTakeStockPage(params).then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
          this.renderData = res.data.records
          this.total = res.data.total
        }
      })
    },

    addTeamTakeStockDraftApi(params) {
      addTeamTakeStockDraft(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('保存草稿成功')
          this.editDialogStatus = false
          this.pageNum = 1
          this.getTeamTakeStockPageApi(
            1,
            this.pageSize,
            this.orderNum,
            this.stockName,
            this.recipient,
            this.stockDate
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },

    updateTeamTakeStockDraftApi(params) {
      updateTeamTakeStockDraft(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('编辑草稿成功')
          this.editDialogStatus = false
          this.getTeamTakeStockPageApi(
            this.pageNum,
            this.pageSize,
            this.stockName,
            this.recipient,
            this.stockDate
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },

    deleteTeamTakeStockApi(id) {
      this.$confirm('此操作将永久删除该物资盘点?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteTeamTakeStock(id).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.pageNum = 1
              this.getTeamTakeStockPageApi(
                1,
                this.pageSize,
                this.stockName,
                this.recipient,
                this.stockDate
              )
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },

    getTeamTakeStockExportApi(params) {
      getTeamTakeStockExport(params).then((res) => {
        download.excel(res, `物资盘点${Date.now()}.xlsx`)
      })
    },

    startProcess(biDto) {
      let params = {
        state: biDto.state,
        type: 'mlTeamTakeStock',
      }
      if (this.approxForm.approveOperation === '0') {
        this.terminatePlanApi(biDto.id)
      } else if (this.approxForm.approveOperation === '1') {
        getNextNodeAssignWay(params).then((res) => {
          if (res.code == 200) {
            if (!res.data) {
              this.executeTaskPlanApi(0, biDto)
            } else if (res.data.assignWay === 0 || res.data.assignWay === 2) {
              if (biDto.state == 'draft' || biDto.state == undefined) {
                this.addTeamTakeStockApi(biDto)
              } else {
                this.executeTaskPlanApi(0, biDto)
              }
            } else if (res.data.assignWay === 1) {
            }
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },

    addTeamTakeStockApi(params) {
      let a = {
        assignees: [],
        opinion: this.approxForm.opinion,
        ccList: this.ccList,
        biDto: params,
      }

      addTeamTakeStock(a).then((res) => {
        if (res.code == 200) {
          this.$message.success('新增物资盘点并成功发起审批')
          this.ccListStatus = false
          this.editDialogStatus = false
          this.pageNum = 1
          this.getTeamTakeStockPageApi(
            1,
            this.pageSize,
            this.stockName,
            this.stockDate
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },

    getTeamTakeStockDetailApi(data) {
      getTeamTakeStockDetail(data.id).then((res) => {
        if (res.code == 200) {
          console.log('物资核销-单条详情::: ', res.data)
          if (this.editTitle === '新增') {
            this.getTeamTakeStockGetItemApi()
          } else {
            this.editForm = res.data
            console.log('this.editForm::: ', this.editForm)
          }
          if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields()
          }

          this.editDialogStatus = true
        } else {
          this.$message.error(res.message)
        }
      })
      if (data.state !== 'draft') {
        getProcessLog({ id: data.orderId }).then((res) => {
          if (res.code == 200) {
            this.steps = res.data
            this.steps.state = this.editForm.state
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },

    getNextNodeAssignWayApi(state = '', type = 'mlTeamTakeStock') {
      let params = {
        state,
        type,
      }
      getNextNodeAssignWay(params).then((res) => {
        if (res.code == 200) {
          this.editForm.assignees = res.data.assignees
          this.editForm.ccList = res.data.ccList
        } else {
          this.ccListStatus = false
          this.$message.error(res.message)
        }
      })
    },

    terminatePlanApi(id) {
      terminatePlan(id).then((res) => {
        if (res.code == 200) {
          this.$message.success('终止成功')
          this.toExamineData.toExamineDataStatus = false
          this.inComData.stockAOrderDiaStatus = falsethis.detailData = {}
          this.$parent.workbenchTaskCountyApi()
          this.$parent.shuaxin()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    executeTaskPlanApi(type, biDto) {
      if (type == 0) {
        let params = {
          assignees: [],
          opinion: this.approxForm.opinion,
          ccList: this.ccList,
          biDto,
        }
        executeTaskPlan(params).then((res) => {
          if (res.code == 200) {
            this.$message.success('审核成功')

            this.toExamineData.toExamineDataStatus = false
            this.inComData.stockAOrderDiaStatus = false
            this.detailData = {}
            this.$parent.workbenchTaskCountyApi()
            this.$parent.shuaxin()
          } else {
            this.$message.error(res.message)

            this.detailData = {}
          }
        })
      } else {
        this.toExamineData.toExamineDataStatus = false
        this.inComData.stockAOrderDiaStatus = false
        this.terminatePlanApi(biDto.id)
      }
    },
    toExamineDataClean() {
      this.toExamineData = {
        toExamineDataStatus: false,
        isSearch: false,
      }
      this.approxForm = {
        approveOperation: '1',

        opinion: '',
      }
    },
  },
}
</script>

<style lang="less" scoped>
#materSectionSuperAnalysis {
  width: 95%;
  margin: 0 auto;
  margin-top: 1rem;
}
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}

.dialogItem {
  float: left;
}
:deep(.el-input.is-disabled .el-input__inner) {
  color: #606266;
  background-color: #f8f6f6;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: #606266;
  background-color: #f8f6f6;
}
</style>
